<script setup lang="ts">
import LogoTitle from '~/components/LogoTitle.vue';
</script>

<template>
	<div
		class="w-full z-50 bg-white py-6 lg:py-10 shadow"
	>
		<!--    MD--2XL -->
		<div class="container hidden md:flex justify-between items-center h-[2.25rem]">
			<LogoTitle class="h-full" />
			<div class="flex gap-10">
				<a href="#">Link</a>
				<a href="#">Link</a>
				<a href="#">Link</a>
				<a href="#">Link</a>
			</div>
		</div>
		<!--    XS -->
		<div class="container relative flex flex-col gap-6 md:hidden justify-center items-center h-[5.28125rem]">
			<LogoTitle />
			<div class="flex gap-3">
				<a href="#">Link</a>
				<a href="#">Link</a>
				<a href="#">Link</a>
				<a href="#">Link</a>
			</div>
		</div>
	</div>
</template>

<style scoped>

</style>
